<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="top-box" :style="{height:navHeight+'px',paddingTop:customHeight.top+'px'}">
					<view class="screen-box flexWrapNo">
						<view class="address-wrap flexWrapNo" @tap="toggleArea()">
							{{currentPosition}}
							<block v-if="areaIndex!=0"></block>
							<image src="../static/home/up-icon.png" class="wrap-icon"></image>
						</view>
						<view class="search-box flexWrapNo" :style="{height:customHeight.height+'px'}">
							<input placeholder="搜索店铺" placeholder-class="placeholderClass" v-model="keyWords"
								@input="freshList()" />
							<image src="../static/home/search-icon.png" class="search-icon"
								:style="{height:customHeight.height+'px',width:customHeight.height+'px'}"></image>
						</view>
					</view>
					<view class="address-box flexWrapNo" v-if="areaFlag">
						<view class="address-item" v-for="(item,index) in areaList" :key="index"
							:class="{active:areaIndex==index}" @tap="changeArea(index)">
							{{item.shortname}}
						</view>
					</view>
				</view>
				<view class="near-store">
					<view class="store-img">
						<image src="https://static.mo-yu.vip/uploads/20231214/ec20f5298395e0eed4b33d47670a4039.jpeg">
						</image>
						<view class="label flexWarpCenterColumn">
							<text>距离</text>
							<text>最近</text>
						</view>
					</view>
					<view class="store-info">
						<view class="shop-name-box flexWrapNo">
							<view class="shop-name">貘鱼台球-城隍庙店</view>
							<view class="shop-status">
								<block>营业中</block>
							</view>
						</view>
						<view class="price-box flexWrapNo">
							<view class="price-item">
								中式黑八:<text>¥22/h</text>
							</view>
							<view class="price-item">
								中式黑八:<text>¥22/h</text>
							</view>
						</view>
						<view class="address-info flexWrap">
							<view class="address-text">四川省德阳市祁阳区城隍庙接42号3楼东侧</view>
							<view class="distance">200m <image src="../static/home/righttop.png" class="righttop">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="nav-box flexWrap">
					<view class="nav-item flexWarpCenterColumn" v-for="(item,index) in navList" :key="index"
						:class="{active:navIndex==index}" @tap="changeNav(index)">
						<image :src="item.icon" class="nav-img" v-if="item.icon"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="shop-box" v-for="(item,index) in storeList" :key='index'
					@tap="goShopDetails(item.id,item)">
					<view class="store-info">
						<view class="shop-name-box flexWrapNo">
							<view class="shop-name">{{item.shop_name}}</view>
							<view class="shop-status" :class="{'repair-status':item.store_status_data!='business'}">
								<block v-if="item.store_status_data=='business'">营业中</block>
								<block v-else-if="item.store_status_data=='rest'">休息中</block>
								<block v-else>筹备中</block>
							</view>
						</view>
						<view class="price-box flexWrapNo">
							<view class="price-item" v-if="item.price&&item.price!=0">
								中式黑八:<text>¥{{item.price}}/h</text>
							</view>
							<view class="price-item" v-if="item.slk_price&&item.slk_price!=0">
								斯洛克:<text>¥{{item.slk_price}}/h</text>
							</view>
							<view class="price-item" v-if="item.jq_price&&item.jq_price!=0">
								九球:<text>¥{{item.jq_price}}/h</text>
							</view>
						</view>
						<view class="address-info flexWrap">
							<view class="address-text">{{item.location}}</view>
							<view class="distance flexWrapNo"> <image src="../static/home/navigation-icon.png" class="navigation-icon"></image> {{item.distance}}km</view>
						</view>
					</view>
				</view>
				<view class="empty-box flexWarpCenterColumn" v-if="storeList.length==0">
					<image src="../static/empty-img.png" class="empty-image"></image>
					<view class="empty-tips">暂无数据</view>
				</view>
				<view class="tips-box flexWarpCenterColumn">
					<view>更多连锁门店，正在陆续加入</view>
					<view>敬请期待</view>
					<view class="telnum" @tap="makePhoneCall">加盟热线：{{phoneNumber}}&nbsp;&nbsp;&nbsp;微信号: moyu24h</view>
				</view>
				<!-- <view class="mask-wrap" v-if="areaFlag"></view> -->
				<view class="fastOrder flexWarpCenterColumn" v-if="orderTime"
					@tap="goPage('/moduleA/orderDetails?order_no='+orderNo)">
					<view class="fastTitle">剩余</view>
					<liu-countdown ref="countdown3" auto mode="1" :showHours="false" :showDays="false"
						:endDate="orderTime"></liu-countdown>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc: 0,
				longitude: "106.540541",
				latitude: "29.590991",
				storeList: [],
				phoneNumber: "4001633996",
				areaList: [],
				areaIndex: -1,
				areaFlag: false,
				navList: [{
						name: "ALL",
					},
					{
						name: "中式黑八",
						icon: "/static/home/black.png"
					},
					{
						name: "台球包房",
						icon: "/static/home/room.png"
					},
					{
						name: "斯诺克",
						icon: "/static/home/slock.png"
					},
					{
						name: "棋牌",
						icon: "/static/home/chess.png"
					}
				],
				navIndex: 0,
				keyWords: "",
				city_id: "",
				bannerList: [],
				currentPosition: "",
				scrollTop: 0,
				//下拉刷新
				page: 1,
				size: 20,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
				customHeight: {
					height: 30,
					top: 20
				},
				navigationBarHeight: "",
				navHeight: "",
				iStatusBarHeight: "",
				orderType: 1,
				orderTime: "",
				orderNo: ""
			}
		},
		onShareAppMessage() {
			return {

			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight - this.customHeight.top
			//#endif
			this.getRecommendBanner();
			if (uni.getStorageSync('scrollTop')) {
				this.storeList = uni.getStorageSync('storeList')
				this.page = uni.getStorageSync('page')
				this.areaList = uni.getStorageSync('areaList')
				this.showEmpty = uni.getStorageSync('showEmpty')
				this.showLoadStatus = uni.getStorageSync('showLoadStatus')
				this.more = uni.getStorageSync('more')
				this.status = uni.getStorageSync('status')
				this.latitude = uni.getStorageSync('latitude')
				this.longitude = uni.getStorageSync('longitude')
				if (uni.getStorageSync('areaItem')) {
					console.log(uni.getStorageSync('areaItem'))
					this.areaIndex = uni.getStorageSync('areaItem').areaIndex
					this.city_id = uni.getStorageSync('areaItem').city_id
					this.currentPosition = uni.getStorageSync('areaItem').currentPosition
				}
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: uni.getStorageSync('scrollTop'), // 滚动到页面的目标位置（单位px）
						duration: 0, // 滚动动画的时长，默认300ms，单位 ms
						complete(complete) {
							console.log(complete)
						}
					});
				}, 300)
			} else {
				this.getAreaList();
			}
		},
		onShow() {
			if (!uni.getStorageSync('longitude') && uni.getStorageSync('latitude')) {
				this.getLocation();
			}
			if (uni.getStorageSync('token')) {
				this.recentlyOrder();
				this.getRelAndResort();
			}
		},
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onPageScroll(e) {
			console.log("滚动距离为：" + e.scrollTop);
			this.scrollTop = e.scrollTop
		},
		methods: {
			// 拨打电话
			makePhoneCall() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.phoneNumber
				})
			},
			// 获取地区
			getAreaList() {
				this.$request.post(this.$api.areaList, {}, {}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.areaList = data.area_list
						this.currentPosition = data.current_position.shortname
						this.areaList.unshift(data.current_position)
						if (uni.getStorageSync('areaItem')) {
							this.areaIndex = uni.getStorageSync('areaItem').areaIndex
							this.city_id = uni.getStorageSync('areaItem').city_id
							this.currentPosition = uni.getStorageSync('areaItem').currentPosition
						}
						this.getLocation();
					}
				})
			},
			// 快速点单数据
			recentlyOrder() {
				this.$request.post(this.$api.recentlyOrder, {}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						if (data) {
							this.orderType = data.type
							if (this.orderType == 0) return;
							this.orderNo = data.order_info.order_no
							if (this.orderType == 1) {
								this.orderTime = this.$tools.formatDate(data.order_info.service_end_time)
							} else if (this.orderType == 2) {
								this.orderTime = this.$tools.formatDate(data.order_info.service_start_time)
							}
							console.log(this.orderTime)
						}
					}
				})
			},
			getRelAndResort(){
				this.$request.post(this.$api.getRelAndResort, {}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						if (data) {
							
						}
					}
				})
			},
			// 获取轮播
			getRecommendBanner() {
				this.$request.post(this.$api.recommendBanner, {}, {}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.bannerList = data
					}
				})
			},
			// 选择地区
			changeArea(index) {
				this.areaIndex = index
				this.city_id = this.areaList[index].id
				this.currentPosition = this.areaList[index].shortname
				let areaItem = {
					areaIndex: this.areaIndex,
					city_id: this.city_id,
					currentPosition: this.currentPosition
				}
				uni.setStorageSync('areaItem', areaItem)
				this.freshList();
				this.toggleArea();
			},
			// 地区筛选的显示隐藏
			toggleArea() {
				this.areaFlag = !this.areaFlag
			},
			changeNav(index) {
				this.navIndex = index
				this.freshList();
			},
			// 进入店铺
			goShopDetails(store_id, item) {
				console.log(store_id, item)
				if (item.store_status_data == 'business') {
					uni.setStorageSync('store_id', store_id)
					uni.setStorageSync('scrollTop', this.scrollTop)
					uni.setStorageSync('storeList', this.storeList)
					uni.setStorageSync('areaList', this.areaList)
					uni.setStorageSync('page', this.page)
					uni.setStorageSync('showEmpty', this.showEmpty)
					uni.setStorageSync('showLoadStatus', this.showLoadStatus)
					uni.setStorageSync('more', this.more)
					uni.setStorageSync('status', this.status)
					uni.navigateTo({
						url: '/moduleA/home'
					})

				} else {
					this.$tools.showToast('该店铺暂时没营业')
				}
			},
			// 推荐店铺
			bannerGo(store_id) {
				uni.setStorageSync('store_id', store_id)
				uni.switchTab({
					url: '/pages/home'
				})
			},
			// 获取经纬度
			getLocation() {
				let that = this
				uni.showLoading({
					title: '获取定位中...',
				})
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: true,
					success: function(res) {
						console.log(res)
						that.longitude = res.longitude
						that.latitude = res.latitude
						uni.setStorageSync('longitude', that.longitude)
						uni.setStorageSync('latitude', that.latitude)
						that.freshList();
					},
					fail(res) {
						uni.hideLoading()
						that.freshList();
						uni.showModal({
							title: '提示',
							content: '请点右上角-设置-允许使用位置，重新进入小程序为您推荐最近的店。'
						})
					}
				});
			},
			// 刷新
			freshList() {
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.storeList = []
				this.getStoreList();
			},
			// 获取店铺列表
			getStoreList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$request.post(this.$api.storeList, {
					longitude: this.longitude,
					latitude: this.latitude,
					device_type_data: this.navIndex,
					shop_name: this.keyWords,
					city_id: this.city_id,
					page: this.page++,
					num: this.size
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						let newArray = data
						if (newArray.length == 0 && this.page == 2) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						} else {
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.storeList = this.storeList.concat(newArray);
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 20upx;
	}

	.fastOrder {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		background-color: #4AA22A;
		border: 2rpx solid #FFF;
		position: fixed;
		right: 30upx;
		bottom: 60upx;
		z-index: 999;
		color: #FFF;
		justify-content: center;

		.fastTitle {
			font-size: 32upx;
			color: #FFF;
			margin-bottom: 10upx;
		}
	}

	.top-box {
		position: sticky;
		top: 0;
		z-index: 999;
		background: #090C11;

		.screen-box {
			.address-wrap {
				font-size: 38rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				// width: 160rpx;
				height: 72rpx;
				background: rgba(0, 0, 0, 0.15);
				justify-content: center;

				.wrap-icon {
					width: 34rpx;
					height: 34rpx;
					margin-left: 12rpx;
					transform: rotate(180deg);
				}
			}

			.search-box {
				height: 72rpx;
				width: 330upx;
				background: rgba(0, 0, 0, 0.15);
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				border: 2rpx solid #FFF;
				border-right: none;
				margin-left: 28rpx;
				padding-left: 28rpx;

				.search-icon {
					width: 74rpx;
					height: 72rpx;
					flex: none;
				}

				input {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFF;
					width: 400rpx;
				}

				.placeholderClass {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFF;
				}
			}
		}
	}

	.address-box {
		flex-wrap: wrap;
		background-color: #090C11;
		z-index: 999;
		padding-top: 30rpx;
		margin-top: -4upx;

		.address-item {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #313235;
			border-radius: 63rpx 63rpx 63rpx 63rpx;
			margin-right: 110rpx;
			margin-bottom: 20rpx;

			&:nth-of-type(3n) {
				margin-right: 0;
			}
		}

		.active {
			background: #3D46C7;
		}
	}

	.near-store {
		border-radius: 20rpx;
		overflow: hidden;

		.store-img {
			height: 380upx;
			position: relative;

			.label {
				width: 80upx;
				height: 86upx;
				padding-top: 20upx;
				position: absolute;
				top: 0;
				left: 32upx;
				background: url('../static/home/label.png') no-repeat center/100% 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #141414;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.store-info {
			background: #232428;
			padding: 36upx 32upx;

			.shop-name-box {
				.shop-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 34rpx;
					color: #FFFFFF;
				}

				.shop-status {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 118upx;
					height: 48upx;
					line-height: 48upx;
					text-align: center;
					background: linear-gradient(180deg, #4AA22A 0%, #69D037 100%);
					border-radius: 36upx;
					margin-left: 24upx;
					flex: none;
				}
			}

			.price-box {
				color: #8F9092;
				ont-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				margin-top: 16upx;

				.price-item {
					margin-right: 20upx;

					&:nth-last-of-type(1) {
						margin-right: 0;
					}

					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-left: 4upx;
					}
				}
			}

			.address-info {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #B5B6B7;
				margin-top: 40upx;

				.address-text {
					line-height: 40upx;
					width: 338upx;
				}

				.distance {
					width: 185rpx;
					height: 72rpx;
					line-height: 72upx;
					text-align: center;
					border-radius: 44rpx 44rpx 44rpx 44rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.2);
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 26rpx;
					color: #FFFFFF;
					flex: none;

					.righttop {
						width: 20upx;
						height: 20upx;
						margin-left: 10upx;
					}
				}
			}
		}
	}

	.nav-box {
		padding: 32rpx 0;

		.nav-item {
			width: 132rpx;
			height: 178rpx;
			background: #232428;
			border-radius: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			justify-content: center;
			margin-right: 4upx;

			.nav-img {
				width: 60upx;
				height: 60upx;
				margin-bottom: 17upx;
			}
		}

		.active {
			font-size: 26rpx;
			font-weight: 500;
			background: #3D46C7;
		}
	}

	.shop-box {
		border-radius: 16upx;
		overflow: hidden;
		margin-bottom: 20upx;

		.store-info {
			background: #232428;
			padding: 36upx 26upx;

			.shop-name-box {
				.shop-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 34rpx;
					color: #FFFFFF;
				}

				.shop-status {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 118upx;
					height: 48upx;
					line-height: 48upx;
					text-align: center;
					background: linear-gradient(180deg, #4AA22A 0%, #69D037 100%);
					border-radius: 36upx;
					margin-left: 24upx;
				}
			}

			.price-box {
				color: #8F9092;
				ont-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 16upx;

				.price-item {
					margin-right: 24upx;

					&:nth-last-of-type(1) {
						margin-right: 0;
					}
					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-left: 4upx;
					}
				}
			}

			.address-info {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #B5B6B7;
				margin-top: 10upx;

				.address-text {
					line-height: 40upx;
					margin-right: 20upx;
				}

				.distance {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					flex: none;
					opacity: .5;
					.navigation-icon{
						width: 20upx;
						height: 26upx;
						margin-right: 6upx;
					}
				}
			}
		}
	}

	.tips-box {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34upx;
		color: #969696;
		margin-top: 14upx;

		.telnum {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #7EE34A;
			margin-top: 22upx;
		}
	}
</style>